/*
1 在登录页面上，点击 注册 链接 跳转
    1 获取 注册链接 dom元素，绑定点击事件
    2 事件触发
        1 先隐藏 登录 div
        2 后显示 注册 div
1 在注册页面上， 点击 登录 链接  跳转到登录页面
    1 获取 登录链接 dom元素，绑定点击事件
    2 事件触发
        1 先隐藏 注册 div
        2 后显示 登录 div
*/
/* 
2.注册业务
    1. 给 注册表单绑定 提交submit事件 - 阻止默认行为 - form 属性 autocomplete="off"  关闭历史输入
    2. 事件触发
        1. 获取用户名和密码
        2. 简单 合法性校验-是否为空
        3. 合法 axios 把用户名和密码发送给后端 完成注册
        4. 后端响应 成功 才提示用户 恭喜注册成功
        5. 等待一会，自动切换到登录的表单
        6.自动帮用户把 账号填写到 登录表单-用户名
*/


// 获取A元素并获取对应的显示隐藏div
// 获取dom元素
const loginA = document.querySelector(".login-a"); // 登录div中的超链接
const loginDiv = document.querySelector(".login"); // 登录div
const registerA = document.querySelector(".register-a"); //注册div中的超链接
const registerDiv = document.querySelector(".register"); // 注册div
const registerForm = document.querySelector(".register form"); // 注册div中的form标签
const loginForm = document.querySelector(".login form"); // 登录div中的form标签
// 点击A模块里的a标签，让A模块隐藏B模块显示
loginA.addEventListener("click", () => {
    loginDiv.style.display = "none";
    registerDiv.style.display = "block";
})
// 点击B模块里a标签，让B模块隐藏A模块显示。
registerA.addEventListener("click", () => {
    loginDiv.style.display = "block";
    registerDiv.style.display = "none";
})

// 注册表单  提交submit事件
registerForm.addEventListener('submit', async function (ev) {
    // 阻止默认行为
    ev.preventDefault();

    // setTimeout(() => {
    //     // 关闭
    //     NProgress.done();
    // }, 5000);

    // 获取 内 用户名和密码
    const username = registerForm.querySelector('input[name=username]').value.trim();
    const password = registerForm.querySelector('input[name=password]').value.trim();
    // 检验是否为空
    if (!username || !password) {
        console.log("你的输入不合法，检查重试");
        return;
    }


    // 使用axios 来发送请求
    // 不是设置异步函数返回promise
    const result = await axios({
        url: "/api/register",
        method: "post",
        data: {
            username,
            password,
        },
    });

    // 输出响应结果
    // 不是异步会直接返回
    // 异步函数就是把异步内部的代码同步执行
    if (result.data.code === 0) {
        toastr.success(result.data.message, "恭喜");
        setTimeout(() => {
            // 切换显示 登录表单
            registerA.click();
            // 把账号填写到登录表单- 用户名 标签上
            loginDiv.querySelector("input[name=username]").value = username;
        }, 1500);
    }
    console.log(result);

})

// 登录表单 登录功能
loginForm.addEventListener('submit', async function (ev) {
    ev.preventDefault();
    // 获取 用户名 和密码
    const username = loginForm.querySelector("input[name=username]").value.trim();
    const password = loginForm.querySelector("input[name=password]").value.trim();
    // 调用登录接口 完成登录
    const result = await axios({
        url: "/api/login",
        method: "post",
        data: {
            username,
            password,
        },
    });
    console.log(result)
    if (result.data.code === 0) {
        // 把token存到 本地存储中
        localStorage.setItem("token8788", result.data.token);
        // 提醒用户
        toastr.success(result.data.message, "恭喜");
        // 等待一会
        setTimeout(() => {
            // 我们打开页面 以后都要使用 open with live server服务器的形式打开
            // 优先使用 相对路径
            location.href = "./index.html";
        }, 2000)
    }
})

